<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动手实验</title>
    <link rel="stylesheet" href="../../css/L2/labor_02.css" />
    <script
      src="../../plugins/jquery-3.6.0.min.js"
      type="text/javascript"
    ></script>
    <script src="../../plugins/zrender.min.js"></script>
    <script src="../../plugins/pixi.js"></script>
    <script src="../../plugins/bump.js"></script>
    <script src="../../plugins/tink.js"></script>
  </head>

  <body style="background-color: rgb(255, 247, 240)">
    <div class="main" id="main">
      <!-- 这里是返回条的div -->
      <div id="backbar">
        <div id="backbutton">&lt</div>
        <div id="backtitle"></div>
        <div id="playicon"></div>
      </div>
      <!-- 在这里设置一个实验完成的遮罩 -->
      <div class="shadowPanel">
        <div class="controlbox">
          <div class="replay">
            <img src="../../images/再玩一遍.png" alt="再看一遍" />
            <p>再玩一遍</p>
          </div>
          <div class="nextItem">
            <img src="../../images/下一环节.png" alt="下一环节" />
            <p>下一环节</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    window.onload = function () {
      let DESIGN_WIDTH = 1334;
      let DESIGN_HEIGHT = 750;
      var water_color = 0;
      var RecordStart_count = 0;
      let record_state = 1,
        RecordPlay_state = 0;
      // 初始化及基准rem的值
      document.documentElement.style.fontSize =
        (window.innerHeight * 12) / DESIGN_WIDTH + 'px';

      // 当前实验是否播放声音
      let audioplay = true;
      let audio;
      // pixijs
      let app, loader;
      let diguan_red, diguan_yellow, diguan_blue, diguan_empty, shaobei;
      let redWater, blueWater, yellowWater;
      let recordplay, recordstart, recordend;
      let message;
      let ans_right, ans_error;
      let cupArray = [],
        crownArray = [],
        redWaterArray = [],
        blueWaterArray = [],
        yellowWaterArray = [];

      // style  control
      let create_crown_conut = 0,
        create_cup_conunt = 0,
        create_flower_conunt = 0,
        create_empty_conut = 0;

      // 归为原点记录
      let initX, initY;
      // bump.js
      let b = new Bump(PIXI);
      // window
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      // tink.js
      let tink;
      let state = play;

      // if (windowHeight / windowWidth < DESIGN_WIDTH / DESIGN_HEIGHT) {
      //   $("html").css({
      //     height: (windowWidth * DESIGN_WIDTH) / DESIGN_HEIGHT,
      //   });
      // }

      function initApp() {
        app = new PIXI.Application({
          resolution: 3,
          width: windowWidth,
          height: windowHeight,
          autoDensity: true,
        });
        app.renderer.backgroundColor = 0xfef6ef;
        document.getElementById('main').appendChild(app.view);
        loader = new PIXI.Loader();
        loader.add([
          '../../images/rowimages_02/滴管1.png',
          '../../images/rowimages_02/滴管2.png',
          '../../images/rowimages_02/滴管3.png',
          '../../images/rowimages_02/滴管4.png',
          '../../images/rowimages_02/清水瓶子.png',
          '../../images/rowimages_02/红色.png',
          '../../images/rowimages_02/黄色.png',
          '../../images/rowimages_02/蓝色.png',
          '../../images/rowimages_02/橙色.png',
          '../../images/rowimages_02/紫色.png',
          '../../images/rowimages_02/绿色.png',
          '../../images/rowimages_02/黑色.png',
          '../../images/rowimages_02/1.png',
          '../../images/rowimages_02/2.png',
          '../../images/rowimages_02/3.png',
          '../../images/rowimages_02/4.png',
          '../../images/rowimages_02/5.png',
          '../../images/rowimages_02/6.png',
          '../../images/rowimages_02/7.png',
          '../../images/rowimages_02/8.png',
          '../../images/rowimages_02/9.png',
          '../../images/rowimages_02/白色报春花.png',
          '../../images/rowimages_02/白色花黑色水.png',
          '../../images/rowimages_02/黑色花黑色水.png',
          '../../images/rowimages_02/位置框.png',
          '../../images/rowimages_02/红色滴液.png',
          '../../images/rowimages_02/蓝色滴液.png',
          '../../images/rowimages_02/黄色滴液.png',
          // "../../images/16pic_6962525_cc1c79f6.svg",
        ]);
        tink = new Tink(PIXI, app.view);
      }
      // 创建背景精灵
      function setBackground() {
        bg = loader.load(setupBg);
        function setupBg() {
          bgimage = new PIXI.Sprite(
            loader.resources['../../images/rowimages_02/位置框.png'].texture
          );
          bgimage.width = (windowWidth * 130) / DESIGN_HEIGHT;
          bgimage.height = windowHeight;
          bgimage.x = (windowWidth * 470) / DESIGN_HEIGHT;
          app.stage.addChild(bgimage);
        }
      }
      // 创建烧杯精灵
      function createCupScript(water_color) {
        let Texture = PIXI.Texture.from(
          '../../images/16pic_6962525_cc1c79f6.svg'
        );

        shaobei = new PIXI.Sprite(
          loader.resources['../../images/rowimages_02/清水瓶子.png'].texture
        );

        // loader.resources["../../images/未放入的水桶.png"].texture
        shaobei.buttonMode = true;
        shaobei.interactive = true;
        shaobei.ishave = false;
        shaobei.width = (windowHeight * 240) / DESIGN_WIDTH;
        shaobei.height = (windowWidth * 120) / DESIGN_HEIGHT;

        let baseLineLeft = parseInt(windowHeight / 3) * create_cup_conunt;
        // let offsetLeft = (parseInt(windowHeight / 3) - shaobei.width) / 2;
        let offsetLeft = (windowHeight * 330) / DESIGN_HEIGHT;
        shaobei.y = baseLineLeft + offsetLeft;
        // shaobei.x = (app.view.height * 430) / DESIGN_HEIGHT;
        shaobei.x = (windowWidth * 53) / DESIGN_WIDTH;
        tink.makeInteractive(shaobei);
        shaobei.zIndex++;
        return shaobei;
      }

      function createCupSprite(water_color) {
        cup = loader.load(cupSetup);
        function cupSetup() {
          shaobei = createCupScript(water_color);
          app.stage.addChild(shaobei);
          cupArray.push(shaobei);
        }
      }
      //创建录音精灵1
      function createRecordplayScript(x, y) {
        RecordplayLoader = loader.load(recordplaySetup);
        function recordplaySetup() {
          recordplay = createrecordplay(x, y);
          recordplay.name = 'recordplay';
          app.stage.addChild(recordplay);
          // cupArray.push(flower);
        }
      }

      function createrecordplay(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/5.png';
        let recordplay = new PIXI.Sprite(
          loader.resources[resourcesstr].texture
        );
        recordplay.width = (windowHeight * 100) / DESIGN_WIDTH;
        recordplay.height = (windowWidth * 100) / DESIGN_HEIGHT;
        recordplay.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        recordplay.y = (windowHeight * offsety) / DESIGN_WIDTH;
        recordplay.interactive = true; //影响交互
        recordplay.bottonMode = true;
        recordplay.on('pointerdown', onRecordPlayButtonDown);
        tink.makeInteractive(recordplay);
        return recordplay;
      }

      function onRecordPlayButtonDown() {
        if (record_state == 3) {
          if (RecordPlay_state == 0) {
            recordplay.texture =
              loader.resources['../../images/rowimages_02/8.png'].texture;
            RecordPlay_state = 1;
          } else {
            recordplay.texture =
              loader.resources['../../images/rowimages_02/7.png'].texture;
            RecordPlay_state = 0;
          }
        }
      }
      //创建录音精灵2
      function createRecordstartScript(x, y) {
        RecordstartLoader = loader.load(recordstartSetup);
        function recordstartSetup() {
          recordstart = createrecordstart(x, y);
          recordstart.name = 'recordstart';
          app.stage.addChild(recordstart);
          // cupArray.push(flower);
        }
      }

      function createrecordstart(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/6.png';
        let recordstart = new PIXI.Sprite(
          loader.resources[resourcesstr].texture
        );
        recordstart.width = (windowHeight * 100) / DESIGN_WIDTH;
        recordstart.height = (windowWidth * 100) / DESIGN_HEIGHT;
        recordstart.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        recordstart.y = (windowHeight * offsety) / DESIGN_WIDTH;
        recordstart.bottonMode = true;
        recordstart.interactive = true; //影响交互
        recordstart.on('pointerdown', onRecordStartButtonDown);
        tink.makeInteractive(recordstart);
        return recordstart;
      }
      function onRecordStartButtonDown() {
        if (RecordStart_count == 0) {
          createRecordingScript(230, 800);
        }
        if (record_state == 3) {
          recordplay.texture =
            loader.resources['../../images/rowimages_02/5.png'].texture;
          recordstart.texture =
            loader.resources['../../images/rowimages_02/6.png'].texture;
          recordend.texture =
            loader.resources['../../images/rowimages_02/2.png'].texture;
          record_state = 1;
        } else if (record_state == 2) {
          recordplay.texture =
            loader.resources['../../images/rowimages_02/7.png'].texture;
          recordstart.texture =
            loader.resources['../../images/rowimages_02/4.png'].texture;
          recordend.texture =
            loader.resources['../../images/rowimages_02/1.png'].texture;

          record_state = 3;
        } else if (record_state == 1) {
          recordstart.texture =
            loader.resources['../../images/rowimages_02/3.png'].texture;
          record_state = 2;
        }
        console.log(record_state);
        RecordStart_count++;
      }
      //创建录音精灵3
      function createRecordendScript(x, y) {
        RecordendLoader = loader.load(recordendSetup);
        function recordendSetup() {
          recordend = createrecordend(x, y);
          recordend.name = 'recordend';
          app.stage.addChild(recordend);
          // cupArray.push(flower);
        }
      }

      function createrecordend(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/2.png';
        let recordend = new PIXI.Sprite(loader.resources[resourcesstr].texture);
        recordend.width = (windowHeight * 100) / DESIGN_WIDTH;
        recordend.height = (windowWidth * 100) / DESIGN_HEIGHT;
        recordend.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        recordend.y = (windowHeight * offsety) / DESIGN_WIDTH;
        recordend.bottonMode = true;
        recordend.interactive = true; //影响交互
        recordstart.on('pointerdown', onRecordendButtonDown);
        tink.makeInteractive(recordend);
        return recordend;
      }

      function onRecordendButtonDown() {
        if (record_state == 3) {
          if (RecordPlay_state == 1) {
            //  TODO:这里是最后结束按钮（就是想要出现再玩一次和课程报告的哪个）
          }
        }
      }
      //创建录音条
      function createRecordingScript(x, y) {
        RecordingLoader = loader.load(RecordingSetup);
        function RecordingSetup() {
          Recording = createRecording(x, y);
          Recording.name = 'Recording';
          app.stage.addChild(Recording);
        }
      }
      function createRecording(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/9.png';
        let Recording = new PIXI.Sprite(loader.resources[resourcesstr].texture);
        Recording.width = (windowHeight * 90) / DESIGN_WIDTH;
        Recording.height = (windowWidth * 360) / DESIGN_HEIGHT;
        Recording.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        Recording.y = (windowHeight * offsety) / DESIGN_WIDTH;
        tink.makeInteractive(Recording);
        return Recording;
      }
      // 创建报春花精灵
      function createflowerScript() {
        let Texture = PIXI.Texture.from(
          '../../images/16pic_6962525_cc1c79f6.svg'
        );
        flower = new PIXI.Sprite(
          loader.resources['../../images/rowimages_02/白色报春花.png'].texture
        );
        flower.buttonMode = true;
        flower.interactive = true;
        flower.ishave = false;
        flower.width = (windowHeight * 240) / DESIGN_WIDTH;
        flower.height = (windowWidth * 120) / DESIGN_HEIGHT;
        let flowerLeft = parseInt(windowHeight / 3) * create_flower_conunt;
        let flowersetLeft = (windowHeight * 530) / DESIGN_HEIGHT;
        flower.y = flowerLeft + flowersetLeft;
        flower.x = (windowWidth * 53) / DESIGN_WIDTH;
        flower.on('pointerup', onFlowerButtonUp);
        flower.on('pointerdown', onFlowerButtonDown);
        tink.makeDraggable(flower);
        tink.makeInteractive(flower);
        flower.zIndex = 1;
        create_flower_conunt++;
        return flower;
      }

      function createflowerSprite() {
        flower = loader.load(flowerSetup);
        function flowerSetup() {
          flower = createflowerScript(670, 900);
          flower.name = 'flower';
          app.stage.addChild(flower);
          cupArray.push(flower);
        }
      }

      // 创建滴管精灵
      function createCrownSprite(offsetx, offsety) {
        let resourcesstr =
          '../../images/rowimages_02/滴管' + (create_crown_conut + 1) + '.png';
        let diguan = new PIXI.Sprite(loader.resources[resourcesstr].texture);
        diguan.buttonMode = true;
        diguan.interactive = true;
        diguan.roundPixels = true;
        diguan.isMove = false;
        diguan.width = (windowHeight * 99) / DESIGN_WIDTH;
        diguan.height = (windowWidth * 130) / DESIGN_HEIGHT;
        diguan.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        diguan.y = (windowHeight * offsety) / DESIGN_WIDTH;
        diguan.on('pointerup', onCrownButtonUp);
        diguan.on('pointerdown', onCrownButtonDown);
        tink.makeDraggable(diguan);
        tink.makeInteractive(diguan);
        return diguan;
      }

      function crateCrownScriptOne(x, y) {
        crown = loader.load(crownSetup);
        function crownSetup() {
          create_crown_conut = 0;
          diguan_red = createCrownSprite(x, y);
          diguan_red.name = 'diguan_red';
          crownArray.push(diguan_red);
          app.stage.addChild(diguan_red);
        }
      }

      function crateCrownScriptTwo(x, y) {
        crown = loader.load(crownSetup);
        function crownSetup() {
          create_crown_conut = 1;
          diguan_yellow = createCrownSprite(x, y);
          diguan_yellow.name = 'diguan_yellow';
          crownArray.push(diguan_yellow);
          app.stage.addChild(diguan_yellow);
        }
      }

      function crateCrownScriptThree(x, y) {
        crown = loader.load(crownSetup);
        function crownSetup() {
          create_crown_conut = 2;
          diguan_blue = createCrownSprite(x, y);
          diguan_blue.name = 'diguan_blue';
          crownArray.push(diguan_blue);
          app.stage.addChild(diguan_blue);
        }
      }

      //创建空的滴管
      function crateCrownScriptempty() {
        crown = loader.load(crownSetup);
        function crownSetup() {
          create_empty_conut++;
          create_crown_conut = 3;
          diguan_empty = createCrownSprite(120, 300 - 60 * create_empty_conut);
          diguan_empty.name = 'diguan_empty';
          diguan_empty.buttonMode = false;
          app.stage.addChild(diguan_empty);
        }
      }

      // 鼠标在滴管上抬起的时候的事件处理函数
      function onCrownButtonUp(e) {
        let that = this;
        if (b.hit(this, shaobei)) {
          intoCup(this, shaobei);
        } else {
          // 滴管返回
          crownBack(that);
        }
        this.isMove = false;
      }

      function onFlowerButtonUp(e) {
        let that = this;
        if (b.hit(this, shaobei)) {
          intoCup(this, shaobei);
        } else {
          // 滴管返回
          crownBack(that);
        }
        this.isMove = false;
      }

      // 记录滴管的初始的位置，并将其可移动的属性设置为true
      function onCrownButtonDown() {
        let _this = this;
        initX = _this.x;
        initY = _this.y;
        _this.isMove = true;
      }

      function onFlowerButtonDown() {
        let _this = this;
        initX = _this.x;
        initY = _this.y;
        _this.isMove = true;
      }

      // 滴管返回原位置的方法
      function crownBack(sprite) {
        sprite.x = initX;
        sprite.y = initY;
      }

      //  滴管滴入颜料动画实现
      function intoCup(x, y) {
        if (x == diguan_red) {
          x.visible = false;
          crateCrownScriptOne(300, 640);
          setTimeout(function () {
            createRedWaterSprite(250, 640);
          }, 300);
          setTimeout(function () {
            createRedWaterSprite(230, 640);
          }, 600);
          setTimeout(function () {
            createRedWaterSprite(210, 640);
          }, 900);
          setTimeout(function () {
            createRedWaterSprite(190, 640);
          }, 1200);
          setTimeout(function () {
            createRedWaterSprite(170, 640);
          }, 1500);
          setTimeout(function () {
            createRedWaterSprite(150, 640);
          }, 1800);
          setTimeout(function () {
            createRedWaterSprite(130, 640);
          }, 2100);
          setTimeout(function () {
            changeCup(diguan_red, shaobei);
            crateCrownScriptempty();
            diguan_red.visible = false;
            for (let i = 0; i < redWaterArray.length; i++) {
              const element = redWaterArray[i];
              element.visible = false;
            }
            checkAllUsed();
          }, 2400);
          // crownBack(sprite)
        }
        if (x == diguan_yellow) {
          x.visible = false;
          crateCrownScriptTwo(300, 640);
          setTimeout(function () {
            createyellowWaterSprite(250, 640);
          }, 300);
          setTimeout(function () {
            createyellowWaterSprite(230, 640);
          }, 600);
          setTimeout(function () {
            createyellowWaterSprite(210, 640);
          }, 900);
          setTimeout(function () {
            createyellowWaterSprite(190, 640);
          }, 1200);
          setTimeout(function () {
            createyellowWaterSprite(170, 640);
          }, 1500);
          setTimeout(function () {
            createyellowWaterSprite(150, 640);
          }, 1800);
          setTimeout(function () {
            createyellowWaterSprite(130, 640);
          }, 2100);

          setTimeout(function () {
            changeCup(diguan_yellow, shaobei);
            crateCrownScriptempty();
            diguan_yellow.visible = false;
            for (let i = 0; i < yellowWaterArray.length; i++) {
              const element = yellowWaterArray[i];
              element.visible = false;
            }
            checkAllUsed();
          }, 2400);
          // crownBack(sprite)
        }
        if (x == diguan_blue) {
          x.visible = false;
          crateCrownScriptThree(300, 640);
          setTimeout(function () {
            createblueWaterSprite(250, 640);
          }, 300);
          setTimeout(function () {
            createblueWaterSprite(230, 640);
          }, 600);
          setTimeout(function () {
            createblueWaterSprite(210, 640);
          }, 900);
          setTimeout(function () {
            createblueWaterSprite(190, 640);
          }, 1200);
          setTimeout(function () {
            createblueWaterSprite(170, 640);
          }, 1500);
          setTimeout(function () {
            createblueWaterSprite(150, 640);
          }, 1800);
          setTimeout(function () {
            createblueWaterSprite(130, 640);
          }, 2100);
          setTimeout(function () {
            changeCup(diguan_blue, shaobei);
            crateCrownScriptempty();
            diguan_blue.visible = false;
            for (let i = 0; i < blueWaterArray.length; i++) {
              const element = blueWaterArray[i];
              element.visible = false;
            }
            checkAllUsed();
          }, 2400);
          // crownBack(sprite)
        }
        if (x == diguan_empty) {
          crownBack(x);
        }
        if (x == flower) {
          if (create_empty_conut == 3) {
            message.visible = false;
            y.texture =
              loader.resources[
                '../../images/rowimages_02/白色花黑色水.png'
              ].texture;
            x.visible = false;
            y.width = (windowHeight * 430) / DESIGN_WIDTH;
            y.height = (windowWidth * 180) / DESIGN_HEIGHT;
            y.y = y.y - 16;
            setTimeout(function () {
              y.texture =
                loader.resources[
                  '../../images/rowimages_02/黑色花黑色水.png'
                ].texture;
              showmessage();
              createRecordplayScript(120, 800);
              createRecordstartScript(120, 920);
              createRecordendScript(120, 1040);
            }, 5000);
          } else {
            crownBack(x);
          }
        }
      }
      //红
      function createRedWaterSprite(x, y) {
        redWaterLoader = loader.load(redWaterSetup);
        function redWaterSetup() {
          redWater = createRedWater(x, y);
          redWater.name = 'redWater';
          app.stage.addChild(redWater);
          redWaterArray.push(redWater);
          // cupArray.push(flower);
        }
      }

      function createRedWater(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/红色滴液.png';
        let red_water = new PIXI.Sprite(loader.resources[resourcesstr].texture);
        red_water.width = (windowHeight * 10) / DESIGN_WIDTH;
        red_water.height = (windowWidth * 10) / DESIGN_HEIGHT;
        red_water.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        red_water.y = (windowHeight * offsety) / DESIGN_WIDTH;
        return red_water;
      }
      //黄
      function createyellowWaterSprite(x, y) {
        yellowWaterLoader = loader.load(yellowWaterSetup);
        function yellowWaterSetup() {
          yellowWater = createyellowWater(x, y);
          yellowWater.name = 'yellowWater';
          app.stage.addChild(yellowWater);
          yellowWaterArray.push(yellowWater);
          // cupArray.push(flower);
        }
      }
      function createyellowWater(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/黄色滴液.png';
        let yellow_water = new PIXI.Sprite(
          loader.resources[resourcesstr].texture
        );
        yellow_water.width = (windowHeight * 10) / DESIGN_WIDTH;
        yellow_water.height = (windowWidth * 10) / DESIGN_HEIGHT;
        yellow_water.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        yellow_water.y = (windowHeight * offsety) / DESIGN_WIDTH;
        return yellow_water;
      }
      //蓝
      function createblueWaterSprite(x, y) {
        blueWaterLoader = loader.load(blueWaterSetup);
        function blueWaterSetup() {
          blueWater = createblueWater(x, y);
          blueWater.name = 'blueWater';
          app.stage.addChild(blueWater);
          blueWaterArray.push(blueWater);
          // cupArray.push(flower);
        }
      }
      function createblueWater(offsetx, offsety) {
        let resourcesstr = '../../images/rowimages_02/蓝色滴液.png';
        let blue_water = new PIXI.Sprite(
          loader.resources[resourcesstr].texture
        );
        blue_water.width = (windowHeight * 10) / DESIGN_WIDTH;
        blue_water.height = (windowWidth * 10) / DESIGN_HEIGHT;
        blue_water.x = (windowWidth * offsetx) / DESIGN_HEIGHT;
        blue_water.y = (windowHeight * offsety) / DESIGN_WIDTH;
        return blue_water;
      }

      // 滴管滴入颜料后更改烧杯颜色
      function changeCup(sprite1, sprite2) {
        if (sprite1 == diguan_red) {
          water_color = water_color + 1;
        } else if (sprite1 == diguan_yellow) {
          water_color = water_color + 2;
        } else if (sprite1 == diguan_blue) {
          water_color = water_color + 6;
        }
        if (water_color == 0) {
          shaobei.texture =
            resources['../../images/rowimages_02/清水瓶子.png'].texture;
        } else if (water_color == 1) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/红色.png'].texture;
        } else if (water_color == 2) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/黄色.png'].texture;
        } else if (water_color == 6) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/蓝色.png'].texture;
        } else if (water_color == 3) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/橙色.png'].texture;
        } else if (water_color == 7) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/紫色.png'].texture;
        } else if (water_color == 8) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/绿色.png'].texture;
        } else if (water_color == 9) {
          shaobei.texture =
            loader.resources['../../images/rowimages_02/黑色.png'].texture;
        }
      }

      // 检查滴管是不是用完了
      function checkAllUsed() {
        if (create_empty_conut == 1) {
          playAudio('../../audio/L2/3.mp3');
        }
        if (create_empty_conut == 2) {
          playAudio('../../audio/L2/4.mp3');
        }

        if (create_empty_conut == 3) {
          // 更换文本提示信息
          message = new PIXI.Text('小朋友，请将报春花放入玻璃瓶中哦！', {
            fontFamily: 'Arial',
            fontSize: (windowHeight * 36) / DESIGN_WIDTH,
            align: 'center',
          });
          message.rotation = Math.PI / 2;
          message.y = (windowHeight - message.width) / 2;
          message.x = (windowWidth * 555) / DESIGN_HEIGHT;
          app.stage.addChild(message);
          playAudio('../../audio/L2/5.mp3');
        }
      }
      function showmessage() {
        message = new PIXI.Text(
          '我们喝了可乐，咖啡之类的黑色饮料，我们也会变黑吗？',
          {
            fontFamily: 'Arial',
            fontSize: (windowHeight * 36) / DESIGN_WIDTH,
            align: 'center',
          }
        );
        message.rotation = Math.PI / 2;
        message.y = (windowHeight - message.width) / 2;
        message.x = (windowWidth * 555) / DESIGN_HEIGHT;
        app.stage.addChild(message);
        playAudio('../../audio/L2/6+7+8.mp3');
      }
      function showrecord() {
        createflowerSprite(0);
        // createRecordScriptone()
        // createRecordScripttwo()
        // createRecordScriptthree()
      }
      function gameLoop() {
        requestAnimationFrame(gameLoop);
        state();
        tink.update();
        app.renderer.render(app.stage);
      }

      async function playAudio(url) {
        if (audio) {
          audio.pause();
        }
        // let audio;
        if (audioplay) {
          audio = new Audio(url);
          audio.play();
        }
        return audio;
      }

      function play() {}

      //对页面的顶端返回条进行设置
      let backbar = $('#backbar');
      backbar.css({
        width: windowHeight,
        height: (windowWidth * 114) / DESIGN_HEIGHT,
        transform: 'rotate(90deg)',
        'transform-origin': '0% 0%',
        top: 0,
        left: windowWidth,
        // "font-size": (windowWidth * 40) / DESIGN_HEIGHT + "px",
        // "font-size": "3.33rem",
      });

      let backbutton = $('#backbutton');
      backbutton.css('line-height', (windowWidth * 114) / DESIGN_HEIGHT + 'px');
      backbutton.css('width', backbutton.height());
      backbutton.css('text-align', 'center');
      backbutton.on('click', function (e) {
        e.stopPropagation();
        location.href = '../../index.html';
      });

      let backtitle = $('#backtitle');
      backtitle.css('line-height', (windowWidth * 80) / DESIGN_HEIGHT + 'px');

      let playicon = $('#playicon');
      playicon.css('width', (windowWidth * 80) / DESIGN_HEIGHT + 'px');
      playicon.on('click', function (e) {
        e.stopPropagation();
        if (audioplay) {
          playicon.css({
            background: "url('../../images/点击播放.png')",
            'background-position': 'center',
            'background-size': '80%',
            'background-repeat': 'no-repeat',
          });
          audioplay = false;
        } else {
          playicon.css({
            background: "url('../../images/播放着.png')",
            'background-position': 'center',
            'background-size': '80%',
            'background-repeat': 'no-repeat',
          });
          audioplay = true;
        }
      });
      if (audioplay == false) {
        playAudio('../../audio/L2/empty.mp3');
      }
      // 对实验的遮罩层进行设置
      let shadowPanel = $('.shadowPanel');
      shadowPanel.hide();
      shadowPanel.css({
        width: windowHeight,
        height: windowWidth,
        'transform-origin': '0% 0%',
        left: windowWidth,
      });

      // 获取再看一遍的按钮
      let replay = $('.replay');
      replay.bind('click', function (e) {
        location.href = '';
        shadowPanel.hide();
        playAudio('../../audio/L2/1+2.mp3');
      });

      let nextItem = $('.nextItem');
      nextItem.bind('click', function (e) {
        window.location.replace('./course_report_02.html');
        shadowPanel.hide();
      });

      initApp();
      setBackground();
      createCupSprite(0);
      createflowerSprite();
      crateCrownScriptOne(490, 356);
      crateCrownScriptTwo(490, 610);
      crateCrownScriptThree(490, 856);
      playAudio('../../audio/L2/1+2.mp3');
      gameLoop();
    };
  </script>
</html>
